<template>
  <!-- 设置页面 -->
  <div class="seting-box">
    <!-- ---------一组--------- -->
    <div class="set-group">
      <div class="group-tit">管理员</div>
      <div class="gtoup-li" v-for="(admin,index) in adminList" :key="index">
        <i class="el-icon-remove-outline" @click="removeItem(admin)"></i>
        <span>{{admin.nickname}}</span>
      </div>
      <!-- 添加按钮 -->
      <div class="gtoup-li">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加</span>
        <el-select v-model="userList" multiple placeholder="请选择" @visible-change="selChange">
          <el-option
            v-for="item in circleList"
            :key="item.userId"
            :label="item.nickname"
            :value="item.userId">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- ---------一组---------end -->
  </div>
</template>

<script>
import { getSelectUserByCircleApi } from "@/BMViews/api/budget/budgetService.js";
import { updateCircleRoleApi } from "@/BMViews/api/financial/deposit.js";
export default {
  name: 'seting',
  data(){
    return{
      userList: [],//已选用户的userid集合
      adminList: [],//管理员列表
      circleList: [],//当前圈子成员列表
    }
  },
  mounted(){
    // this.getCircleMembersFn() // 获取当前圈子成员列表
  },
  methods:{
    // 获取当前圈子成员列表
    async getCircleMembersFn(){
      let data = {
        circleId: this.$store.state.user.userInfo.whereCircleId,//当前圈子
        type: '1'
      }
      let result = await getSelectUserByCircleApi(data)
      if(result.code==200){
        this.circleList = result.rows
        // 过滤出管理员
        this.adminList = this.circleList.filter(item=>item.role.includes('3'))
        // 获取已选的用户列表
        this.userList = [] //先清空
        this.adminList.forEach(item=>this.userList.push(item.userId))
      }
    },

    // 点击选择器
    selChange(e){
      // 选择器隐藏的时候发请求
      if(!e){
        this.userList.forEach(k=>{
          // 找到这个用户
          let item = this.circleList.find(f=>f.userId==k)
          let data = {
          	circleId: item.circleId, //当前这个圈的圈子id
          	userId: item.userId, //用户id(要修改的用户)
          }
          // 判断角色
          let role = item.role.split(',')
          // 如果这个角色没有目标管理员的角色的就发请求
          if(!item.role.includes('3')){
            role.push('3') //设置目标管理员
            role = role.sort((a, b) => Number(a)- Number(b)) //正序
            data.role = [...new Set(role)].join(',')
            this.updateCircleRole(data) // 设置目标管理员的接口
          }
        })
      }
    },

    // 删除目标管理员的回调
    removeItem(item){
      let data = {
      	circleId: item.circleId, //当前这个圈的圈子id
      	userId: item.userId, //用户id(要修改的用户)
      }
      // 判断角色
      let role = item.role.split(',')
      if(item.role.includes('3')){
        let index = role.indexOf('3')
        role.splice(index, 1)// 删除目标管理员
        console.log(index);
      }
      data.role = [...new Set(role)].join(',')
      this.updateCircleRole(data) // 设置目标管理员的接口
    },

    // 设置目标管理员的接口
    async updateCircleRole(data){
      let result = await updateCircleRoleApi(data)
      if (result.code == 200) {
      	this.getCircleMembersFn() //刷新成员列表
        this.$message({message: '设置成功',type: 'success'})
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// 一组
.set-group{
  // margin: 15px 0;
  .group-tit{
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
  }
  .gtoup-li{
    position: relative;
    padding: 10px 20px;
    background-color: #F3F3F3;
    border-bottom: 1px solid #E0E0E0;
    font-size: 14px;
    color: #666;
    i{
      margin-right: 5px;
      cursor: pointer;
    }
    .el-select{
      position: absolute;
      left: 10px;
      top: 0;
      width: calc(100% - 20px);
      opacity: 0;
      ::v-deep .el-tag__close{
        display: none;
      }
    }
  }
}
</style>